(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['vue'], factory);
    } else if (typeof exports === 'object') {
        factory(require('vue'));
    } else {
        factory(Vue);
    }
}(function(Vue) {

  //
  Vue.component('s-areas', {
      template: `
      <div class="form-group from-singplay s-areas-wrap">
        <label class="grop-title">案件归属地</label>
        <pre>{{selected}}</pre>
        <div class="s-areas-in" @click="showBoxHandle">
          <span class="holder" v-show="!selected.length">请选择</span>
          <span class="oitem" v-for="item in selected">{{showSelItem(item)}}</span>
        </div>
        <div class="s-areas-box" v-show="showBox">
          <ul class="area-nav">
            <li class="area-nav-item"
              v-for="(item, $index) in level"
              :class="checkNav($index, item.dis)"
              @click="selView($index, item)">{{item.n}}</li>
            <li class="area-nav-item">添加</li>
          </ul>
          <div class="area-detail" v-show="viewIndex === 0">
            <span v-for="item in provlist"
              :class="{'active': item.checked}"
              @click="addItem(item, 0)">{{item.name}}</span>
          </div>
          <div class="area-detail" v-show="viewIndex === 1">
            <span v-for="item in citylist"
              :class="{'active': item.checked}"
              @click="addItem(item, 1)">{{item.name}}</span>
          </div>

        </div>
      </div>
      `,
      props: ['value'],
      data() {
        return {
          showBox: false,
          viewIndex: 0,
          level: [
            {
              n: '省级',
              dis: false
            },
            {
              n: '市级',
              dis: true
            },
            {
              n: '区县',
              dis: true
            }
          ],
          selected: [],
          provlist: [],
          citylist: [],
        }
      },
      created() {
        this.getProv()
      },
      methods: {
        showBoxHandle() {
          this.showBox = !this.showBox;
        },

        // 点击添加
        addItem(item, view) {
          var _this = this;

          // 省级
          if (view === 0) {
            if (this.selected.length) {
              var exit = false;

              (function del() {
                for (var i in _this.selected) {
                  if (_this.selected[i].belong_province == item.code) {
                    _this.selected.splice(i, 1);
                    _this.level[1].dis = _this.selected.length !== 1;

                    item.checked = false;
                    exit = true;

                    return del();
                  }
                }
              })();

              if (exit) {
                return
              }
            }

            item.checked = true;
            this.selected.push({
              belong_province: item.code,
              belong_province_name: item.name
            });

            this.level[1].dis = this.selected.length !== 1;
          }

          // 市级
          if (view === 1) {

            // 当只有一个时
            if (this.selected.length === 1) {
              if (this.selected[0].belong_city === undefined) {
                this.selected[0].belong_city = item.code;
                this.selected[0].belong_city_name = item.name;

                item.checked = true;
                this.level[2].dis = this.selected.length !== 1;
                return
              } else if (this.selected[0].belong_city === item.code) {
                delete this.selected[0].belong_city;
                delete this.selected[0].belong_city_name

                item.checked = false;
                this.level[2].dis = this.selected.length !== 1;
                return
              }
            }

            for (var i in this.selected) {
              if (this.selected[i].belong_city == item.code) {
                this.selected.splice(i, 1);
                item.checked = false;

                this.level[2].dis = this.selected.length !== 1;
                return
              }
            }

            item.checked = true;
            this.selected.push({
              belong_city: item.code,
              belong_city_name: item.name,
              belong_province: this.selected[0].belong_province,
              belong_province_name: this.selected[0].belong_province_name
            });

            this.level[2].dis = this.selected.length !== 1;
          }

          if (view === 2) {

          }

        },

        // 控制标签样式
        checkNav(index, dis) {
          var cl = [];

          this.viewIndex === index && cl.push('active');
          dis && cl.push('dis');

          return cl.join(' ')
        },

        // 显示选择内容
        showSelItem(item) {
          var area = [];

          item.belong_province_name && area.push(item.belong_province_name);
          item.belong_city_name && area.push(item.belong_city_name);
          item.belong_county_name && area.push(item.belong_county_name);

          return area.join('/');
        },

        // 切换标签
        selView(index, item) {
          if (item.dis) {
            return
          }

          if (index === 1) {
            this.selCity(this.selected[0].belong_province)
          }

          if (index === 2) {
            // this.selCity(this.selected[0].belong_province)
          }

          this.viewIndex = index;
        },

        // 获取省级数据
        getProv() {
          $.get('/region/prov_list')
            .then(data => {
              if (!data) return;
              this.provlist = JSON.parse(data).map(t => {
                t.checked = false;
                return t
              });
            })
        },

        // 获取城市
        selCity(prov) {
          $.get('/region/city_list?province=' + prov)
            .then(data => {
              this.citylist = JSON.parse(data).map(t => {
                t.checked = false;

                this.selected.forEach(vt => {
                  t.checked = vt.belong_city === t.code;
                })

                return t
              });

            })
        },


      }
  })

}));
